<template>
    <div class="user-box">
        <s-header :name="'修改密码'"></s-header>
        <div>
            <div class="phone_p">
                <van-field
                        v-model="code"
                        center
                        clearable
                        placeholder="请先输入短信验证码"
                        label="短信验证码"
                        >
                    <template #button>
                        <van-button size="small" color="#1baeae" type="primary" round @click="send_sms">{{sms_interval}}</van-button>
                    </template>
                </van-field>
                <van-field
                    v-model="old_password"
                    type="password"
                    name="old_password"
                    label="旧密码"
                    placeholder="旧密码"
                    :rules="[{ required: true, message: '请填写旧密码' }]"
                    />
                    <van-field
                    v-model="new_password"
                    type="password"
                    name="new_password"
                    label="新密码"
                    placeholder="新密码"
                    :rules="[{ required: true, message: '请填写新密码' }]"
                    />
            </div>
            <van-button class="save-btn" color="#1baeae" type="info" @click="updatePWD" round >修改密码</van-button>
            <van-button class="back" color="#CCCCCC" type="default" @click="goBack" round >返回</van-button>
        </div>
    </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import { Tabs, Toast } from 'vant'
export default {
  components: {
    sHeader
  },
  data(){
    return {
        old_password:'',
        new_password:'',
        signature:'',
        id:'',
        mobile:'',
        code:'',
        is_send:false,
        sms_interval:'获取验证码',
        show:false
    }
  },
  created(
  ){
    this.id=this.$cookies.get('id')
    let mobile = this.$cookies.get('mobile')
    if(mobile){
        this.is_send = true
    }
  },
  methods:{
    send_sms() {
      let mobile = this.$cookies.get('mobile')
      if (!this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
      this.$axios.get(this.$settings.BASE_URL + 'userinfo/user/send_sms/?mobile=' + mobile).then(res => {
        if (res.code !== 100) {
          Toast({message:res.msg, position: 'bottom',})
        }
      })
    },
    updatePWD(){
        if(this.code){
            let mobile = this.$cookies.get('mobile')
            this.$axios.post(this.$settings.BASE_URL + 'userinfo/phone/is_sms/' , {
              mobile:mobile,code:this.code
            }).then(res => {
           if(res.code==100){
              if(!(this.old_password==this.new_password)){
                this.$axios.put(this.$settings.BASE_URL + 'userinfo/update_password/' + this.id + '/?user_id=' + this.id, {
                    old_password:this.old_password,new_password:this.new_password
                }).then(res=>{
                    if(res.code==100){
                        this.$cookies.remove('token')
                        this.$cookies.remove('name')
                        this.$cookies.remove('icon')
                        this.$cookies.remove('id')
                        this.$cookies.remove('icon')
                        this.$cookies.remove('mobile')
                        Toast({message:'修改成功', position: 'bottom',})
                        window.location.href = '/'
                    }else{
                        Toast({message:res.msg, position: 'bottom',})
                    }
                })
              }else{
                Toast({message:'新密码不能与新密码一样', position: 'bottom',})
              }
           }else{
            Toast({message:res.msg, position: 'bottom',})
           }
        })
        }else{
            Toast({message:'请输入验证码', position: 'bottom',})
        }
        },
    goBack(){
        this.$router.go(-1)
    },
  }
}
</script>


<style lang="less" scoped>
  @import '../common/style/mixin';
  .user-box {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10000;
      .fj();
      .wh(100%, 44px);
      line-height: 44px;
      padding: 0 10px;
      .boxSizing();
      color: #252525;
      background: #fff;
      border-bottom: 1px solid #dcdcdc;
      .phone{
        font-size: 14px;
        margin-top:80px;
        margin-left: 130px;
      }
      .phone_font{
        margin-left: 120px;
        font-size: 24px;
      }

    .save-btn {
      width: 80%;
      margin-left: 40px;
      margin-top:30px
    }
    .back{
        width: 80%;
        margin-left: 40px;
        margin-top:15px

    }
    .phone_p{
        margin-top:50px;

    }
    }

</style>
